<template>
  <div class="w-full bg-fill-2 p-16 min-h-100">
    <!-- 标题 -->
    <!-- <div class="grid gap-x-2 gap-y-4 grid-cols-6" :style="{ 'grid-template-columns': 'repeat(4, 1fr) 60px' }">
      <div class="px-8 flex items-center">
        <mci-text model-value="参数名称" />
      </div>
      <div class="px-8 flex items-center">
        <mci-text model-value="字段Key" />
      </div>
      <div class="px-8 flex items-center">
        <mci-text model-value="类型" />
      </div>
      <div class="px-8 flex items-center">
        <mci-text model-value="默认值" />
      </div>
      <div class="px-8 flex items-center">
        <mci-text model-value="操作" />
      </div>
    </div> -->
    <!-- 行 -->

    <div class="w-full" style="overflow-y: auto">
      <div
        v-for="(item, index) in paramDatas"
        :key="item.id"
        class="grid gap-x-2 gap-y-6 mt-4 grid-cols-6 pb-8"
        :style="{ 'grid-template-columns': 'repeat(4, 1fr) 60px' }"
        style="padding-bottom: 10px"
      >
        <div class="flex items-center">
          <mci-input
            v-model="item.varLabel"
            placeholder="请输入中文名称"
            :min="INPUT_MIN_DATA_NAME"
            :max="INPUT_MAX_DATA_NAME"
            class="w-full"
          />
        </div>
        <div class="flex items-center px-8">
          <mci-input
            v-model="item.varName"
            placeholder="请输入英文名称"
            :min="INPUT_MIN_DATA_KEY"
            :max="INPUT_MAX_DATA_KEY"
            class="w-full"
          />
        </div>
        <div class="flex items-center px-8">
          <mci-select
            v-model="item.varType"
            :list="fieldTypeOptions"
            placeholder="请选择数据类型"
            class="w-full"
            @change="
              () => {
                item.initValue = undefined;
              }
            "
          >
            <mci-option
              v-for="option in fieldTypeOptions"
              :key="option.dictCode"
              :label="option.dictName"
              :value="option.dictCode"
            />
          </mci-select>
        </div>
        <div class="flex items-center px-8">
          <mci-switch v-if="item.varType === VarType.Boolean" v-model="item.initValue" />
          <MciDatePicker
            v-else-if="item.varType === VarType.Date || item.varType === VarType.DateTime"
            v-model="item.initValue"
            :mode="'edit'"
            :type="item.varType === VarType.Date?'date':'datetime'"
            :format="item.varType === VarType.Date?'YYYY-MM-DD':'YYYY-MM-DD HH:mm:ss'"
            :placeholder="item.varType === VarType.Date?'请选择日期':'请选择时间'"
            value-format="x"
            class="w-full"
          />
          <mci-input
            v-else
            v-model="item.initValue"
            placeholder="请输入默认值"
            :min="INPUT_MIN_DATA_DEFAULT"
            :max="INPUT_MAX_DATA_DEFAULT"
            class="w-full"
            :type="item.varType === VarType.Integer || item.varType === VarType.Decimal ? 'number' : 'text'"
          />
        </div>
        <!-- <div class="flex items-center px-8">
          <mci-input
            v-model="item.desc"
            placeholder="请输入"
            :min="INPUT_MIN_DATA_DESC"
            :max="INPUT_MAX_DATA_DESC"
          />
        </div> -->
        <div class="flex items-center px-8">
          <mci-button type="danger" link @click="deleteRow(index)"> 删除 </mci-button>
        </div>
      </div>
    </div>
    <div class="py-8">
      <mci-button icon="mci-icon-add" link @click="addRow"> 添加参数 </mci-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { v4 as uuidv4 } from 'uuid';
import { MciButton, MciInput, MciSelect, MciOption, MciSwitch } from '@/components/base';
import { dataModelKey, type Parameter, VarType } from '@/views/data-source/components/AggModel/components/AggModelAdd/data';
import {
  INPUT_MAX_DATA_NAME,
  INPUT_MIN_DATA_NAME,
  INPUT_MAX_DATA_KEY,
  INPUT_MIN_DATA_KEY,
  INPUT_MAX_DATA_DEFAULT,
  INPUT_MIN_DATA_DEFAULT
} from './data';
import { getDictFieldType } from '@/api/decision-engine';
import type { IGetDictFieldTypeRes } from '@/api/decision-engine';

const { updateParameters } = inject(dataModelKey);
// 值类型
const fieldTypeOptions = ref<any[]>([]);
// 参数列表
const paramDatas = ref<Parameter[]>([]);
watch(
  [() => paramDatas],
  ([newVal]) => {
    updateParameters(newVal.value);
  },
  { deep: true }
);

const deleteRow = (index: number) => {
  paramDatas.value.splice(index, 1);
};

// 初始化
const initData = (parameters?: any) => {
  paramDatas.value = parameters || [];
};
// 增加行
const addRow = () => {
  const row: Parameter = {
    initValue: '',
    varLabel: '',
    varName: '',
    varType: undefined,
    id: uuidv4()
  };
  paramDatas.value.push(row);
};

// 值类型
const fieldTypeRequest = async () => {
  const data: IGetDictFieldTypeRes = await getDictFieldType();

  if (data) {
    fieldTypeOptions.value = data;
  }
};
fieldTypeRequest();

const getData = () => {
  return { parameters: paramDatas.value };
};

defineExpose({
  initData,
  getData,
  addRow
});
</script>
